<template>
	<!--重点企业专题分析-->
	<div class="thematic-analysis">
		<div class="topBox">
			<div class="leftBox">
				<div class="topTilte">企业基本信息</div>
				<div class="tableBoxs">
					<li>
						<div style="width:15%" class="titles topborder">中文全称</div>
						<div style="width:35%" class="topborder">{{list.name}}</div>
						<div style="width:15%" class="titles topborder">公司网站</div>
						<div style="width:35%" class="topborder rightBorder"><a :href="list.website" target="_blank">{{list.website}}</a></div>
					</li>
					<li>
						<div style="width:15%" class="titles">英文名称</div>
						<div style="width:35%" class="">{{list.qyjc}}</div>
						<div style="width:15%" class="titles">成立日期</div>
						<div style="width:35%" class="rightBorder">{{list.clsj}}</div>
					</li>
					<li>
						<div style="width:15%" class="titles">企业特点</div>
						<div style="width:85%" class="rightBorder">
							<span class="tagSpan" v-for="(item,index) in list.qyldarr">{{item}}</span>
						</div>
					</li>
					<li>
						<div style="width:15%" class="titles">员工人数</div>
						<div style="width:35%" class="">{{list.ygrs}}</div>
						<div style="width:15%" class="titles">注册地址</div>
						<div style="width:35%" class="rightBorder">{{list.zcdz}}</div>
					</li>
					<li>
						<div style="width:15%" class="titles">办公地址</div>
						<div style="width:85%" class="rightBorder">{{list.bgdz}}</div>
					</li>
					<li style="height:29vh">
						<div style="width:15%" class="titles">公司简介</div>
						<div style="width:85%;;overflow-y: auto;line-height: 4vh;" class="rightBorder manyText">
						 {{list.qyzyjs}}
						</div>
					</li>
				</div>
			</div>
			<div class="rightBox">
				<div class="outlineBox">
					<div class="topTilte">近12个月财务概要</div>
					<div class="outlineCentent">
						<li>
							<img src="../../assets/images/mlv.png" alt="">
							<span>{{cwgy.mll}}%</span>
							<p>毛利率</p>
						</li>
						<li>
							<img src="../../assets/images/jlv.png" alt="">
							<span>{{cwgy.jll}}%</span>
							<p>净利率</p>
						</li>
						<li>
							<img src="../../assets/images/tzhbl.png" alt="">
							<span>{{cwgy.tzhbl}}%</span>
							<p>投资回报率</p>
						</li>
					</div>
				</div>
				<div class="cheartsBox">
					<div class="chartLeftBox">
						<div class="tabbox1">
							<li v-for="(item,index) in lintab1" :key="index" :class="{active:lintabIndex==index}">
								<span :style="{'background-image':'url('+(lintabIndex==index?tabImg1:tabImg)+')'}" @click="lineTabclick1(item,index)">{{item.name}}</span>
							</li>
						</div>
						<div class="centerLine">
							<span>{{linText1}}</span>
						</div>
						<div class="chartce">
							<chart-block chartID="chart5" :title="optionData1.title" :optionData="optionData1" chartType="getStackBar" height="35vh" style="padding:0 1vh 1vh 0;box-shadow: none;border:none;margin-top:-2vh" :isTitle="false"></chart-block>
						</div>
					</div>
					<div class="chartRightBox">
						<div class="tabbox1">
							<li v-for="(item,index) in lintab2" :key="index" :class="{active:lintabIndex1==index}">
								<span :style="{'background-image':'url('+(lintabIndex1==index?tabImg1:tabImg)+')'}" @click="lineTabclick2(item,index)">{{item.name}}</span>
							</li>
						</div>
						<div class="centerLine">
							<span>{{linText2}}</span>
						</div>
						<div class="chartce">
							<chart-block chartID="chart6" :title="optionData2.title" :optionData="optionData2" chartType="getStackBar" height="35vh" style="padding:0 1vh 1vh 0;box-shadow: none;border:none;margin-top:-2vh" :isTitle="false"></chart-block>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="centerBox">
			<el-row>
				<el-col span="8">
					<div style="margin-right:.5vw">
						<chart-block chartID="chart1" :title="BorderPieOptionData1.title" :optionData="BorderPieOptionData1" chartType="getBorderPie" height="30vh" :dispatchData="dispatchData" @mouseover="Amouseover" @mouseout="Amouseout"></chart-block>
					</div>
				</el-col>
				<el-col span="8">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart2" :title="BorderPieOptionData2.title" :optionData="BorderPieOptionData2" chartType="getBorderPie" height="30vh" :dispatchData="dispatchData1" @mouseover="Amouseover1" @mouseout="Amouseout1"></chart-block>
					</div>
				</el-col>
				<el-col span="8">
					<div style="margin-left:.5vw">
						<chart-block chartID="chart3" :title="BorderPieOptionData3.title" :optionData="BorderPieOptionData3" chartType="getBorderPie" height="30vh" :dispatchData="dispatchData2" @mouseover="Amouseover2" @mouseout="Amouseout2"></chart-block>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="linechartBox">
			<chart-block chartID="chart4" :title="singleLineOptionData.title" :optionData="singleLineOptionData" chartType="getSingleLine" height="40vh" style="padding:0 1vh 3vh 0"></chart-block>
		</div>
		<div class="tabBox">
			<div class="tabSwicthbox">
				<li v-for="(item,index) in tabListText" :key="index" :class="{active:tabListIndex==index}" @click="tabClick(item,index)"><span>{{item.name}}</span></li>
			</div>
			<table-block :oprData="oprData" :pageSize="pageSize" :total="total" @currentChange="currentChange" align="center" :currePage="currePage"></table-block>
		</div>
	</div>
</template>

<script>
import {getSpecialData,getSpecialData1,getSpecialData2,getSpecialData3,getSpecialData4,getSpecialData5,getSpecialData6,getSpecialData7,getSpecialData8} from '@/api/pages.js'
export default {
	name: "thematic-analysis",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
		TableBlock:()=>import('@/components/table-block'),
	},
	props: {},
	data() {
		return {
			companyId:this.$route.query.companyId||1,
			tabImg:require('../../assets/images/slqtab.png'),
			tabImg1:require('../../assets/images/sqltab2.png'),
			lintab1:[{name:'营业收入',id:'E072'},{name:'毛利',id:'E083'},{name:'净利润',id:'E085'}],
			lintab2:[{name:'研发投入',id:'E086'},{name:'资本支出',id:'E087'}],
			lintabIndex:0,
			lintabIndex1:0,
			linText1:'营业收入',
			linText2:'研发投入',
			tabListText:[{name:'公司高管',id:'P016'},{name:'盈利预测',id:'P015'}],
			tabListIndex:0,
			BorderPieOptionData1:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			BorderPieOptionData2:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			BorderPieOptionData3:{},
			singleLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor:"rgba(92, 210, 254,1)",
						bottomColor:"rgba(92, 210, 254, 0)"
					},
					{//折线图填充区域渐变色
						topColor:"rgba(105, 209, 239,.3)",
						bottomColor:"rgba(105, 209, 239, 0)"
					},
				],
				LineCircleColor:"#14d0e1",//折线图颜色
				LineCircleBorderColor:"#14d0e1",//折线图描边颜色
			},
			optionData1:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			optionData2:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			pageSize:10,
			total:0,
			currePage:1,
			oprData:{},
			list:{},
			cwgy:{},
			comType:'P016',
			dispatchData:{},
			Maxindex:0,
			dispatchData1:{},
			Maxindex1:0,
			dispatchData2:{},
			Maxindex2:0
		}
	},
	computed: {},
	created() {
	},
	mounted() {
		this.getSpecialData('C040',this.companyId)
		this.getSpecialData1('C041',this.companyId)
		this.getSpecialData2('E072',this.companyId)
		this.getSpecialData3('E086',this.companyId)
		this.getSpecialData4('E073',this.companyId)
		this.getSpecialData5('E074',this.companyId)
		this.getSpecialData6('E075',this.companyId)
		this.getSpecialData7('E084',this.companyId)
		this.getSpecialData8(this.comType,this.companyId,1,this.pageSize)
	},
	methods: {
		// 分页事件
		currentChange(e){
			this.currePage=e
			this.getSpecialData8(this.comType,this.companyId,e,this.pageSize)
		},
		tabClick(item,index){
			this.tabListIndex=index
			this.currePage=1
			this.comType=item.id
			this.getSpecialData8(this.comType,this.companyId,1,this.pageSize)
		},
		lineTabclick1(item,index){
			this.lintabIndex=index
			this.linText1=item.name
			this.getSpecialData2(item.id,this.companyId)
		},
		lineTabclick2(item,index){
			this.lintabIndex1=index
			this.linText2=item.name
			this.getSpecialData3(item.id,this.companyId)
		},
		// 基本信息
		getSpecialData(busiCode,qyId){
			getSpecialData(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					if(res.data.data.list[0].qyld.length>0){
						res.data.data.list[0].qyldarr = res.data.data.list[0].qyld.split(',')
					}else{
						res.data.data.list[0].qyldarr=[]
					}
					this.list=res.data.data.list[0]
				}
			}).catch(err=>{
				
			})
		},
		// 近12个月财务概要
		getSpecialData1(busiCode,qyId){
			getSpecialData1(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					this.cwgy=res.data.data.list[0]
				}
			}).catch(err=>{
				
			})
		},
		// 营业收入、毛利、净利润
		getSpecialData2(busiCode,qyId){
			getSpecialData2(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					this.optionData1={
						title:'',
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData:res.data.data.seriesData,
						color:["#2FFF9B"],
					}
				}
			}).catch(err=>{
				
			})
		},
		// 研发投入、资本支出
		getSpecialData3(busiCode,qyId){
			getSpecialData3(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					this.optionData2={
						title:'',
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData:res.data.data.seriesData,
						color:["#2FFF9B"],
					}
				}
			}).catch(err=>{
				
			})
		},
		// 行业收入结构
		getSpecialData4(busiCode,qyId){
			getSpecialData4(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					var MaxArr =[]
					let _this = this
					res.data.data.seriesData[0].data.forEach((item,index,arr)=>{
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for(let i=0;i<MaxArr.length;i++){
						if(MaxArr[i]==MaxData){
							_this.Maxindex=i
						}
					}
					this.dispatchData={
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.Maxindex
					}
					this.BorderPieOptionData1={
						title:res.data.data.title,
                        unit:res.data.data.seriesData[0].unit,
						seriesData:res.data.data.seriesData[0].data,
						seriesCenter:['30%', '50%'],
						right:'2%',
						color:['#F4A95B', '#6363FF', '#00BEFC'],
						pieSelect:true
					}
				}
			}).catch(err=>{
				
			})
		},
		// 产品、业务收入结构
		getSpecialData5(busiCode,qyId){
			getSpecialData5(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					var MaxArr =[]
					let _this = this
					res.data.data.seriesData[0].data.forEach((item,index,arr)=>{
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for(let i=0;i<MaxArr.length;i++){
						if(MaxArr[i]==MaxData){
							_this.Maxindex1=i
						}
					}
					this.dispatchData1={
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.Maxindex1
					}
					this.BorderPieOptionData2={
						title:res.data.data.title,
                        unit:res.data.data.seriesData[0].unit,
						seriesData:res.data.data.seriesData[0].data,
						seriesCenter:['30%', '50%'],
						// top:'0',
						lineHeight:'0',
						right:'0',
						// fontsize:'12',
						color:['#F4A95B', '#6363FF', '#00BEFC'],
						pieSelect:true
					}
				}
			}).catch(err=>{
				
			})
		},
		// =区域销售收入
		getSpecialData6(busiCode,qyId){
			getSpecialData6(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					var MaxArr =[]
					let _this = this
					res.data.data.seriesData[0].data.forEach((item,index,arr)=>{
						MaxArr.push(item.value)
					})
					var MaxData = Math.max(...MaxArr)
					for(let i=0;i<MaxArr.length;i++){
						if(MaxArr[i]==MaxData){
							_this.Maxindex2=i
						}
					}
					this.dispatchData2={
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: _this.Maxindex2
					}
					this.BorderPieOptionData3={
						title:res.data.data.title,
                        unit:res.data.data.seriesData[0].unit,
						seriesData:res.data.data.seriesData[0].data,
						seriesCenter:['30%', '50%'],
						right:'5%',
						color:['#F4A95B', '#6363FF', '#00BEFC'],
						pieSelect:true
					}
				}
			}).catch(err=>{
				
			})
		},
		// 两年股价走势
		getSpecialData7(busiCode,qyId){
			getSpecialData7(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					let datas = res.data.data.seriesData[0].data
					let lineData =new Array(datas.length)
					for(let i=0;i<lineData.length;i++){
						if(i==0){
							lineData[0]=datas[0]
						}else if(i==lineData.length-1){
							lineData[lineData.length-1]=datas[lineData.length-1]
						}else{
							lineData[i]=0
						}
					}
					this.singleLineOptionData={
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: [
							{
								data: lineData,//折线图两侧竖线数据
							},
							res.data.data.seriesData[0]
						],
						LinearGradientColor:[//渐变色
							{ //折线图两侧竖线数据渐变色
								topColor:"rgba(92, 210, 254,1)",
								bottomColor:"rgba(92, 210, 254, 0)"
							},
							{//折线图填充区域渐变色
								topColor:"rgba(105, 209, 239,.3)",
								bottomColor:"rgba(105, 209, 239, 0)"
							},
						],
						LineCircleColor:"#14d0e1",//折线图颜色
						LineCircleBorderColor:"#14d0e1",//折线图描边颜色
					}
				}
			}).catch(err=>{
				
			})
		},
		// 公司高管、盈利预测
		getSpecialData8(busiCode,qyId,current,size){
			getSpecialData8(busiCode,qyId,current,size).then(res=>{
				if(res.data.code==200){
					this.oprData.tableData=res.data.data.tableData
					this.oprData.list=res.data.data.list.records
					this.total=res.data.data.list.total
				}
			}).catch(err=>{
				
			})
		},
		Amouseover(e){
			let _this = this
			if(e.dataIndex!=this.Maxindex)
			this.dispatchData={
				type: 'downplay',
				seriesIndex: 0,
				dataIndex:_this.Maxindex
			}
		},
		Amouseout(e){
			let _this =this
			// this.Maxindex = e.dataIndex;
			this.dispatchData={
				type: 'highlight',
				seriesIndex: 0,
				dataIndex:_this.Maxindex
			}
		},
		Amouseover1(e){
			let _this = this
			if(e.dataIndex!=this.Maxindex1)
			this.dispatchData1={
				type: 'downplay',
				seriesIndex: 0,
				dataIndex:_this.Maxindex1
			}
		},
		Amouseout1(e){
			let _this =this
			// this.Maxindex = e.dataIndex;
			this.dispatchData1={
				type: 'highlight',
				seriesIndex: 0,
				dataIndex:_this.Maxindex1
			}
		},
		Amouseover2(e){
			let _this = this
			if(e.dataIndex!=this.Maxindex2)
			this.dispatchData2={
				type: 'downplay',
				seriesIndex: 0,
				dataIndex:_this.Maxindex2
			}
		},
		Amouseout2(e){
			let _this =this
			// this.Maxindex = e.dataIndex;
			this.dispatchData2={
				type: 'highlight',
				seriesIndex: 0,
				dataIndex:_this.Maxindex2
			}
		}
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.thematic-analysis {
	width:100%;
	height:auto;
	overflow: hidden;
	padding-bottom:1.5vh;
	box-sizing: border-box;
	.topBox{
		width:100%;
		height:60vh;
		.leftBox{
			width:47%;
			height:100%;
			float: left;
			padding:0 1.5vw 1.5vw 1.5vh;
			box-sizing: border-box;
			background: rgba(4, 35, 162, 0.08);
			border: 1px solid #0e7fd6;
			-webkit-box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
			box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
			.topTilte{
				width: 100%;
				height: 3.98vh;
				margin-top: -1px;
				line-height: 3.98vh;
				color: #FFFFFF;
				font-size: 0.94vw;
				font-weight: bold;
				text-align: center;
				background: url(../../assets/images/chart_block_title_blue_big.png);
				background-size: 100% 100%;
			}
			.tableBoxs{
				width:100%;
				height:calc(100% - 2.98vh);
				padding-top:1.2vw;
				box-sizing: border-box;
				li{
					list-style: none;
					height:4.5vh;
					div{
						width:50%;
						height:100%;
						color:#fff;
						float: left;
						border:1px solid #0e5e8d;
						padding:0vw 1vw;
						// font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 0.89vw;
						border-top:none;
						border-right:none;
						line-height: 4.5vh;
						span{
							padding:0.2vh 0.1vw;
							font-size:11px;
							border-radius: 4px;
							border:.5px solid;
							margin-right:1vw
						}
						a{
							color:#0274ff;
						}
						span.tagSpan{
							border:none;
							color:#FF6600;
							font-size:0.9vw
						}
					}
					div.topborder{
						border-top:1px solid #0e5e8d;
					}
					div.rightBorder{
						border-right:1px solid #0e5e8d;
					}
					div.manyText{
						line-height: 20px;
					}
					div.titles{
						color:#fff;
					}
				}
			}
		}
		.rightBox{
			width:51%;
			height:100%;
			float: right;
			.outlineBox{
				width:100%;
				height:14vh;
				padding:0 1.5vw 1.5vw 1.5vh;
				box-sizing: border-box;
				background: rgba(4, 35, 162, 0.08);
				border: 1px solid #0e7fd6;
				-webkit-box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
				box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
				.topTilte{
					width: 100%;
					height: 3.98vh;
					margin-top: -1px;
					line-height: 3.98vh;
					color: #FFFFFF;
					font-size: 0.94vw;
					font-weight: bold;
					text-align: center;
					background: url(../../assets/images/chart_block_title_blue_big.png);
					background-size: 100% 100%;
				}
				.outlineCentent{
					width:100%;
					height:calc(100% - 2.98vh);
					padding-top:0vw;
					box-sizing: border-box;
					display: flex;
					li{
						list-style: none;
						flex: 1;
						img{
							width:1.2vw;
							height:2.2vh;
							float: left;
							margin:1.5vh 1vh 0 4vw;
						}
						span{
							font-size: 1.4vw;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #F7B329;
							line-height: 5.2vh;
						}
						p{
							width:100%;
							padding:0;
							margin:0;
							font-size: 1.15vw;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #FFFFFF;
							padding-left:4vw;
							box-sizing: border-box;
							margin-top:-.5vh
						}
					}
				}
			}
			.cheartsBox{
				width:100%;
				height:calc(100% - 15.5vh);
				box-sizing: border-box;
				margin-top:1.5vh;
				.chartLeftBox{
					width:52%;
					height:100%;
					background: rgba(4, 35, 162, 0.08);
					border: 1px solid #0e7fd6;
					-webkit-box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
					box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
					float: left;
					.tabbox1{
						width:100%;
						height:4vh;
						padding-top:1vh;
						box-sizing: border-box;
						display: flex;
						li{
							list-style: none;
							margin-top:1vh;
							flex: 1;
							span{
								width:6vw;
								height:4vh;
								display: block;
								margin:0 auto;
								text-align: center;
								color:#2692DD;
								background-size: 100% 100%;
								font-size:0.89vw;
								font-weight: bold;
								line-height: 4.2vh;
								cursor: pointer;
							}
						}
						li.active{
							span{
								color:#C5EAFF
							}
						}
					}
					.centerLine{
						width:100%;
						height:5vh;
						background: url(../../assets/images/linCentebg.png);
						line-height: 6vh;
						text-align: center;
						margin-top:2vh;
						span{
							padding:.5vh .9vw;
							border:1px solid #198FE5;
							display: inline;
							color:#fff;
							border-radius: 4px;
							font-size: 1vw;
							font-weight: bold;
							background: #061E4F;
						}
					}
				}
				.chartRightBox{
					width:46%;
					height:100%;
					background: rgba(4, 35, 162, 0.08);
					border: 1px solid #0e7fd6;
					-webkit-box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
					box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
					float: right;
					.tabbox1{
						width:100%;
						height:5vh;
						padding-top:1vh;
						box-sizing: border-box;
						display: flex;
						li{
							list-style: none;
							flex: 1;
							margin-top:1vh;
							span{
								width:6vw;
								height:4vh;
								display: block;
								margin:0 auto;
								text-align: center;
								color:#2692DD;
								background-size: 100% 100%;
								font-size:0.89vw;
								font-weight: bold;
								line-height: 4.2vh;
								cursor: pointer;
							}
						}
						li.active{
							span{
								color:#C5EAFF
							}
						}
					}
					.centerLine{
						width:100%;
						height:5vh;
						margin-top:1vh;
						background: url(../../assets/images/linCentebg.png);
						line-height: 6vh;
						text-align: center;
						span{
							padding:.5vh .9vw;
							border:1px solid #198FE5;
							display: inline;
							color:#fff;
							border-radius: 4px;
							font-size: 1vw;
							font-weight: bold;
							background: #061E4F;
						}
					}
				}
			}
		}
	}
	.centerBox{
		width:100%;
		height:30vh;
		margin-top:2vh;
	}
	.linechartBox{
		width:100%;
		height:40vh;
		margin-top:2vh;
	}
	.tabBox{
		width:100%;
		height:50vh;
		margin-top:2vh;
		padding:1.5vh;
		box-sizing: border-box;
		background: rgba(4, 35, 162, 0.08);
		overflow: auto;
		// border: 1px solid #0e7fd6;
		// -webkit-box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
		// box-shadow: 0 0 1.51vh rgba(1, 103, 185, 0.5) inset;
		.tabSwicthbox{
			width:100%;
			height:5.5vh;
			margin-bottom:2vh;
			background-image: linear-gradient(to right, rgba(3, 66, 123, .2),rgba(3, 66, 123, .1), rgba(3, 66, 123, 0));
			padding-left:1vh;
			li{
				width: 6.5vw;
				height: 100%;
				list-style: none;
				transform:skew(15deg);
				background-color: #03427B;
				float: left;
				margin-right:.2vw;
				border-radius: 6px;
				span{
					display: block;
					line-height: 5.5vh;
					color:#05B4FA;
					text-align: center;
					transform:skew(-15deg);
					font-size: 0.98vw;
					font-weight: bold;
					cursor: pointer;
				}
			}
			li.active{
				background-color: #05B4FA;
				span{
					color:#fff
				}
			}
		}
	}
}
</style>
